<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stickman Running Across Screen</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            overflow: hidden;
            background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
        }
        
        .stickman-container {
            position: absolute;
            bottom: 40px;
            width: 100px;
            height: 180px;
            animation: run-across 8s linear infinite;
        }
        .stickman-container:hover {
            animation-play-state: paused;
        }
        
        .stickman {
            position: relative;
            width: 100%;
            height: 100%;
            transform-origin: center bottom;
            animation: body-bounce 0.5s infinite alternate ease-in-out;
        }
        
        /* 头部 */
        .head {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #333;
            animation: head-tilt 1s infinite alternate ease-in-out;
        }
        
        /* 身体 */
        .body {
            position: absolute;
            top: 30px;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 60px;
            background-color: #333;
        }
        
        /* 手臂 */
        .left-arm, .right-arm {
            position: absolute;
            top: 35px;
            left: 50%;
            transform-origin: top center;
            width: 4px;
            height: 50px;
            background-color: #333;
        }
        
        .left-arm {
            animation: arm-swing-left 0.5s infinite ease-in-out;
        }
        
        .right-arm {
            animation: arm-swing-right 0.5s infinite ease-in-out;
        }
        
        /* 腿部 */
        .left-leg, .right-leg {
            position: absolute;
            top: 90px;
            left: 50%;
            transform-origin: top center;
            width: 4px;
            height: 70px;
            background-color: #333;
        }
        
        .left-leg {
            animation: leg-swing-left 0.5s infinite ease-in-out;
        }
        
        .right-leg {
            animation: leg-swing-right 0.5s infinite ease-in-out;
        }
        
        /* 地面 */
        .ground {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px;
            background: linear-gradient(to top, #8D6E63, #A1887F);
        }
        
        .ground::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 200%;
            height: 10px;
            background: repeating-linear-gradient(
                to right,
                transparent,
                transparent 20px,
                rgba(255,255,255,0.1) 20px,
                rgba(255,255,255,0.1) 40px
            );
            animation: ground-move 1s linear infinite;
        }
        
        /* 动画关键帧 */
        @keyframes run-across {
            0% {
                left: -100px;
            }
            100% {
                left: calc(100% + 100px);
            }
        }
        
        @keyframes arm-swing-left {
            0% {
                transform: translateX(-50%) rotate(45deg);
            }
            50% {
                transform: translateX(-50%) rotate(-30deg);
            }
            100% {
                transform: translateX(-50%) rotate(45deg);
            }
        }
        
        @keyframes arm-swing-right {
            0% {
                transform: translateX(-50%) rotate(-45deg);
            }
            50% {
                transform: translateX(-50%) rotate(30deg);
            }
            100% {
                transform: translateX(-50%) rotate(-45deg);
            }
        }
        
        @keyframes leg-swing-left {
            0% {
                transform: translateX(-60%) rotate(20deg);
            }
            50% {
                transform: translateX(-60%) rotate(-70deg);
            }
            100% {
                transform: translateX(-60%) rotate(20deg);
            }
        }
        
        @keyframes leg-swing-right {
            0% {
                transform: translateX(-40%) rotate(-70deg);
            }
            50% {
                transform: translateX(-40%) rotate(20deg);
            }
            100% {
                transform: translateX(-40%) rotate(-70deg);
            }
        }
        
        @keyframes body-bounce {
            0% {
                transform: translateY(0) rotate(0deg);
            }
            100% {
                transform: translateY(-5px) rotate(1deg);
            }
        }
        
        @keyframes head-tilt {
            0% {
                transform: translateX(-50%) rotate(-3deg);
            }
            50% {
                transform: translateX(-50%) rotate(3deg);
            }
            100% {
                transform: translateX(-50%) rotate(-3deg);
            }
        }
        
        @keyframes ground-move {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -40px 0;
            }
        }
    </style>
</head>
<body class="h-screen">
    <div class="container mx-auto px-4 py-8">
        <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-center text-dark mb-4">Running Stickman</h1>
        <p class="text-center text-gray-700 mb-8">Watch the stickman run from left to right with natural movements</p>
        
        <div class="relative w-full h-[60vh] bg-blue-50 rounded-xl shadow-lg overflow-hidden">
            
            <!-- 火柴人容器 -->
            <div class="stickman-container">
                <div class="stickman">
                    <div class="head"></div>
                    <div class="body"></div>
                    <div class="left-arm"></div>
                    <div class="right-arm"></div>
                    <div class="left-leg"></div>
                    <div class="right-leg"></div>
                </div>
            </div>
            
            <!-- 地面 -->
            <div class="ground"></div>
        </div>
        

    </div>

</body>
</html>
    